<template>
  <view class="IndexContent">
    <!-- 用户信息 -->
    <view class="IndexUserContent">
      <view class="UserAvatar">
        <img
          style="width: 100px; height: 100px; border-radius: 50%"
          src="https://s1.ax1x.com/2023/06/26/pCU2MNR.png"
        />
      </view>
      <view class="WelcomeText">
        <text v-if="userInfo !== null">早上好,{{ userInfo.userName }}</text>
        <text>请开始一天的工作吧</text>
        <view class="weatherToday">
          <text>今日晴，20℃ - 32℃！</text>
        </view>
      </view>
    </view>
    <!-- 工作情况 -->
    <view class="WorkStatus">
      <nut-cell round-radius="10">
        <template #default>
          <!-- 数据 -->
          <view class="userWorkData">
            <text class="Title">工作情况</text>
            <view class="userWorkItems">
              <view class="WorkItem" @click="showTodo">
                <text class="ItemHeader">待办</text>
                <text class="ItemContent">{{ noticeStore().data.length }}</text>


              </view>
              <view class="WorkItem">
                <text class="ItemHeader">待审核</text>
                <text class="ItemContent">4</text>
              </view>
              <view class="WorkItem">
                <text class="ItemHeader">参与项目</text>
                <text class="ItemContent">6</text>
              </view>
            </view>
          </view>
        </template>
      </nut-cell>
    </view>
    <!-- 工作进度 -->
    <view class="WorkProgress">
      <nut-cell round-radius="10">
        <template #default>
          <!-- 数据 -->
          <view class="ProgressData">
            <text class="Title">任务进度</text>
            <view class="ProgressList">
              <nut-cell>
                <template #default>
                  <view class="progressItem">
                    <view class="progressName">
                      <text>翻译</text>
                    </view>
                    <view class="progressView">
                      <nut-progress
                        percentage="30"
                        stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
                        status="active"
                        size="small"
                        style="align-items: center"
                      />
                    </view>
                  </view>
                </template>
              </nut-cell>
              <nut-cell>
                <template #default>
                  <view class="progressItem">
                    <view class="progressName">
                      <text>审核</text>
                    </view>
                    <view class="progressView">
                      <nut-progress
                        percentage="60"
                        stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
                        status="active"
                        size="small"
                        style="align-items: center"
                      />
                    </view>
                  </view>
                </template>
              </nut-cell>
              <nut-cell>
                <template #default>
                  <view class="progressItem">
                    <view class="progressName">
                      <text>识别</text>
                    </view>
                    <view class="progressView">
                      <nut-progress
                        percentage="90"
                        stroke-color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
                        status="active"
                        size="small"
                        style="align-items: center"
                      />
                    </view>
                  </view>
                </template>
              </nut-cell>
              <nut-cell>
                <template #default>
                  <view class="progressItem">
                    <view class="progressName">
                      <text>校对</text>
                    </view>
                    <view class="progressView">
                      <nut-progress
                        percentage="100"
                        status="icon"
                        size="small"
                        style="align-items: center"
                      />
                    </view>
                  </view>
                </template>
              </nut-cell>
            </view>
          </view>
        </template>
      </nut-cell>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import needLogin from "@/utils/needLoginHook";
import { useUserStore } from "@/store/user";
import { UserInfo } from "./index";
import { computed } from "vue";
import Taro from "@tarojs/taro";
import {noticeStore} from '@/store/notice';
//只有这一个是有效的!
// <text class="ItemContent">{{ noticeStore().data.length }}</text>
// <text class="ItemContent">{{ data.length }}</text>
// <text class="ItemContent">{{daibanNumber }}</text>


// let data = noticeStore().data
// console.log('datadatadata',data);
// const daibanNumber  = computed(()=>{
//   return noticeStore().data.length
// })
// 登录判断
needLogin();
// 登录后存储的用户数据
const user = useUserStore();
// 用户信息
const userInfo = ref<UserInfo>(user.userInfo);



const showTodo = ()=>{
  Taro.navigateTo({
  url: '/pages/todo/index',
})

}
</script>

<style lang="scss">
page {
  height: 100%;
}
.IndexContent {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(at top right, #84b2e8 30%, #f3f7ff);
  .IndexUserContent {
    padding: 50px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    .UserAvatar {
      margin-right: 50px;
    }
    .WelcomeText {
      display: flex;
      flex-direction: column;
      margin-left: 50px;
      text {
        font-size: 36px;
      }
      .weatherToday {
        text {
          font-size: 20px;
          color: rgb(0, 0, 0, 0.45);
        }
      }
    }
  }
  .WorkStatus {
    margin: 0 30px;
  }
  .userWorkData {
    width: 100%;
    .Title {
      font-weight: bold;
    }
    .userWorkItems {
      display: flex;
      justify-content: space-around;
      margin-top: 1rem;
      .WorkItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        .ItemContent {
          font-weight: bold;
          color: #3f7aed;
        }
      }
    }
  }
  .WorkProgress {
    margin: 0 30px;
    .ProgressData {
      width: 100%;
      .Title {
        font-weight: bold;
      }
      .ProgressList {
        height: 500px;
        overflow-y: auto;
      }
    }
  }
}
.progressItem {
  width: 100%;
  display: flex;
  .progressName {
    width: 20%;
  }
  .progressView {
    display: flex;
    align-items: center;
    width: 80%;
  }
}
</style>
